<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>李先帅</title>
		<style type="text/css">
			.main {
				width: 1100px;
				height: 800px;
				background-image: url(img/221121.png);
			}
			
			.pg {
				position: absolute;
				width: 100px;
				height: 100px;
				background-image: url(img/太阳.png);
				font-size: 50px;
				font-family: "黑体";
				text-align: center;
				line-height: 100px;
			}
			.top {
				height: 600px;
				overflow: hidden;
				position: relative;
			}
			
			.text {
				font-size: 25px;
				font-weight: bold;
				color:white;
			}
			
			.kaishi {
				width: 60px;
				height: 60px;
				position: absolute;
				left: 260px;
				top: 30px;
				border-radius: 50%;
				cursor: pointer;
				text-align: center;
				line-height: 60px;
			    background-image: url(img/月亮.png);
			}
			
			.zanting {
				width: 60px;
				height: 60px;
				position: absolute;
				left: 190px;
				top: 30px;
				border-radius: 50%;
				cursor: pointer;
				text-align: center;
				line-height: 60px;
				background-image: url(img/月亮.png);
			}
			
			.tuichu {
				width: 60px;
				height: 60px;
				position: absolute;
				left: 40px;
				top: 30px;
				border-radius: 50%;
				cursor: pointer;
				text-align: center;
				line-height: 60px;
				background-image: url(img/月亮.png);
			}
			
			.jieshu {
				width: 60px;
				height: 60px;
				position: absolute;
				left: 110px;
				top: 30px;
				border-radius: 50%;
				cursor: pointer;
				text-align: center;
				line-height: 60px;
				background-image: url(img/月亮.png);
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="top">

				<!--<div id="pg01" class="pg" style="left: 350px;top: 0px">
					A
				</div>
				<div id="pg02" class="pg" style="left: 50px;top: 150px">
					B
				</div>
				<div id="pg03" class="pg" style="left: 150px;top: 0px">
					C
				</div>
				<div id="pg04" class="pg" style="left: 250px;top: 0px">
					D
				</div>-->
			</div>
			<div class="bottom">
				<table style="position: relative;" width="100%" height="200px">
					<tr>
						<td width="450">
							<div class="kaishi" onclick="kaishi()">开始</div>
							<div class="zanting" onclick="zanting()">暂停</div>
							<div class="tuichu" onclick="tuichu()">退出</div>
							<div class="jieshu" onclick="jieshu()">结束</div>
						</td>
						<td width="350" height="200">
							<div class="text" id="zql">正确率：100%</div>
							<div class="text" id="time"> 时间：00:00:00</div>
							<div class="text">速度：0个/分钟</div>
						</td>
						<td width="300px" height="110px">
						</td>
					</tr>
				</table>
			</div>
		</div>
		<script type="text/javascript">
			//拿到要控制的苹果元素
			//			var pg1 = document.querySelector("#pg01");
			//			var pg2 = document.querySelector("#pg02");
			var nz1 = 0; //苹果移动定时器ID
			var createPG = 0; //创建苹果定时器的ID
			var timeid = 0; //时间定时器的ID
			var time = 0; //统计用时
            var sum=0;//总泡泡数
            var count=0;//击中的泡泡数
			function tuichu() {
				window.close();
			}

			window.onkeydown = function(event) {
				if(nz1 != 0) {
					var divtop = document.querySelector(".top");
					for(var i = 0; i < divtop.children.length; i++) {
						var k = divtop.children[i].getAttribute("key");
						var t1=parseInt(divtop.children[i].style.top);
						if(t1>=0 && k == event.keyCode){
							divtop.removeChild(divtop.children[i]);
							document.querySelector("#zql").innerHTML="正确率："+parseInt((1-count/sum)*100)+"%";
							break;
						}
					}
				}
			}

			function zanting() {
				clearInterval(nz1);
				clearInterval(createPG);
				clearInterval(timeid);
				nz1 = 0;
			}

			function jieshu() {
				zanting();
				var divtop = document.querySelector(".top");
				divtop.innerHTML = "";
				time = 0;
				document.querySelector("#time").innerHTML = "时间:00:00:00";
			}

			function kaishi() {
				if(nz1 == 0) {
					nz1 = setInterval(function() {
						var top = document.querySelector(".top");
						for(var i = 0; i < top.children.length; i++) {
							var pg = top.children[i];
							var t=parseInt(pg.style.top)+parseInt(pg.getAttribute("sudu"));
							pg.style.top = t+"px";
							if(t>500){
								//删除失败的泡泡
								top.removeChild(top.children[i]);
								//记录失败的个数
								count++;
								document.querySelector("#zql").innerHTML="正确率："+parseInt((1-count/sum)*100)+"%";
							}
						}
					}, 50);
					createPG = setInterval(function() {
						//每2秒添加一个苹果
						var div = document.createElement("div");
						div.className = "pg";
						div.style.left = Math.random() * 885 + "px";
						div.style.top = "-75px";
						var ch = parseInt(Math.random() * 26 + 65);
						div.setAttribute("key", ch);
						div.setAttribute("sudu",parseInt(Math.random()*5)+1)
						div.innerHTML = "&#" + ch + ";";
						document.querySelector(".top").appendChild(div);
						sum++;
					}, 2000);

					//时间计时
					timeid = setInterval(function() {
						time++;
						var ss = time % 60;
						ss = ss < 10 ? "0" + ss : ss;
						var mm = parseInt(time / 60) % 60;
						mm = mm < 10 ? "0" + mm : mm;
						var hh = parseInt(time / 3600);
						hh = hh < 10 ? "0" + hh : hh;
						var divtime = document.querySelector("#time");
						divtime.innerHTML = "时间:" + hh + ":" + mm + ":" + ss;
					}, 1000);
					
				}
			}
		</script>
	</body>

</html>